<template>
    <div class="goods">
        <div class="left-menu" ref="leftMenu">
            <ul>
                <li
                    class="left-menu-item"
                    v-for="(goodgroup, index) in goods"
                    :key="index"
                    :class="{'selectedGoodClass': selectedIndex === index}"
                    @click="clickIndex(index, $event)"
                >
                    <span class="text">
                        <span
                            v-show="goodgroup.type>0"
                            class="icon"
                            :class="iconClassMap[goodgroup.type]"
                        ></span>
                        {{goodgroup.name}}
                    </span>
                </li>
            </ul>
        </div>
        <div class="right-menu" ref="rightMenu">
            <ul>
                <li v-for="(good, index) in goods" :key="index" class="good-list-hook">
                    <span class="right-good-title">{{good.name}}</span>
                    <ul class="right-foods-list">
                        <li class="right-food" v-for="(food, i) in good.foods" :key="i">
                            <v-food :food="food" @clickAction="showDetail(food)"></v-food>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <shopping-cart
            :minPrice="minPrice"
            :deliveryPrice="deliveryPrice"
            :selectFoods="selectedFoods"
        ></shopping-cart>
        <food-detail :food="detailFood" ref="foodDetail"></food-detail>
    </div>
</template>

<script>
import dataJson from '../../../data.json'
import vFood from './food'
import shoppingCart from './shoppingcart'
import FoodDetail from './fooddetail/FoodDetail'
import goods from '../../api/api'
import BScroll from 'better-scroll'

export default {
    mounted() {
        this.$nextTick(() => {
            this.initScroll()
            this.caculateGoodsHeight()
        })
    },
    created() {
        this.getGoods()
    },
    data() {
        return {
            goods: dataJson.goods,
            minPrice: dataJson.seller.minPrice,
            deliveryPrice: dataJson.seller.deliveryPrice,
            goodHeightList: [],
            scrollY: 0,
            isClickScroll: false,
            detailFood: {}
        }
    },
    computed: {
        iconClassMap() {
            return ['deserase', 'discount', 'special', 'invoice', 'guarantee']
        },
        selectedIndex() {
            let index = 0
            for (let i = 0; i < this.goodHeightList.length; i++) {
                let currentHeight = this.goodHeightList[i]
                let nextHeight =
                    i + 1 >= this.goodHeightList.length
                        ? currentHeight
                        : this.goodHeightList[i + 1]
                if (
                    currentHeight <= this.scrollY &&
                    nextHeight > this.scrollY
                ) {
                    index = i
                }
            }
            return index
        },
        selectedFoods() {
            let tempFoods = []
            this.goods.forEach(good => {
                good.foods.forEach(food => {
                    if (food.count > 0) {
                        tempFoods.push(food)
                    }
                })
            })
            return tempFoods
        }
    },
    components: {
        vFood,
        shoppingCart,
        FoodDetail
    },
    methods: {
        /* 绑定元素, 绑定滚动事件 */
        initScroll() {
            this.leftMenuScroll = new BScroll(this.$refs.leftMenu, {
                click: true
            })
            this.rightMenuScroll = new BScroll(this.$refs.rightMenu, {
                click: true,
                probeType: 3
            })

            this.rightMenuScroll.on('scroll', pos => {
                if (this.isClickScroll) {
                    return
                }
                this.scrollY = Math.abs(Math.round(pos.y))
            })
            this.rightMenuScroll.on('scrollStart', () => {
                this.isClickScroll = false
            })
        },
        caculateGoodsHeight() {
            let goodList = this.$refs.rightMenu.getElementsByClassName(
                'good-list-hook'
            )
            let height = 0
            this.goodHeightList.push(height)
            for (let i = 0; i < goodList.length; i++) {
                height += goodList[i].clientHeight
                this.goodHeightList.push(height)
            }
        },
        clickIndex(index, event) {
            if (!event._constructed) {
                return
            }
            this.isClickScroll = true
            let el = this.$refs.rightMenu.getElementsByClassName(
                'good-list-hook'
            )[index]
            this.rightMenuScroll.scrollToElement(el, 250)
            this.scrollY = this.goodHeightList[index]
        },
        showDetail(food) {
            this.detailFood = food
            this.$refs.foodDetail.show()
        },
        getGoods() {
            goods
                .getGoodsData()
                .then(response => {
                    console.log('success', response)
                })
                .catch(error => {
                    console.log('error', error)
                })
        }
    }
}
</script>

<style lang="less">
@import '../../common/mixin.less';
.goods {
    display: flex;
    position: absolute;
    top: 176px;
    bottom: 46px;
    width: 100%;
    overflow: hidden;
    .left-menu {
        flex: 0 0 80px;
        width: 80px;
        font-size: 0px;
        background-color: #f3f5f7;
        .left-menu-item {
            display: table;
            width: 56px;
            height: 54px;
            padding: 0 12px;
            font-size: 0px;
            &.selectedGoodClass {
                background-color: white;
            }
            .text {
                display: table-cell;
                vertical-align: middle;
                font-size: 12px;
                line-height: 18px;
                .icon {
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    margin: 3px 0;
                    vertical-align: top;
                    background-size: 12px 12px;
                    background-repeat: no-repeat;
                    &.deserase {
                        background-image: url('../../assets/resource/img/decrease_4@3x.png');
                    }
                    &.discount {
                        background-image: url('../../assets/resource/img/discount_4@3x.png');
                    }
                    &.guarantee {
                        background-image: url('../../assets/resource/img/guarantee_4@3x.png');
                    }
                    &.invoice {
                        background-image: url('../../assets/resource/img/invoice_4@3x.png');
                    }
                    &.special {
                        background-image: url('../../assets/resource/img/special_4@3x.png');
                    }
                }
            }
        }
    }
    .right-menu {
        flex: 1;
        overflow: hidden;
        .right-good-title {
            display: inline-block;
            background-color: #f3f5f7;
            height: 30px;
            width: 100%;
            line-height: 30px;
            padding-left: 10px;
        }
        .right-food {
            margin: 10px 10px 0 10px;
            .border-1px(#eeeeee, 10px);
            &:last-of-type {
                .border-none();
            }
        }
    }
}
</style>
